iT邦幫忙

DAY 20
2

使用Jenkins打造.Net CI Server系列 第 20

CI Server 20 - 使用JsLint及CssLint檢查語法正確性

  • 分享至 

  • xImage
  •  

在我們撰寫C#的時候,可以透過Visual Studio的幫忙,
透過編譯程式碼,IDE會即時的反應出錯誤的程式碼或警告訊息。
而我們在撰寫JavaScript或Css的時候就沒辦法享受到這種好處,
在本篇文章中要向大家介紹JsLint和CssLint,
讓Js和Css一樣能夠在寫完時就用工具來幫忙檢查是否有潛在的錯誤,
不必等到執行後才能找出問題。
※設定使用JsLint
JsLint是由JavaScript所撰寫的一套Library,
我們可以利用它來找出我們撰寫的JavaScript的問題,幫助我們提升程式碼品質,
最簡單的使用方法是直接將寫好的JavaScript貼到官網中的線上檢查器
可以馬上看到結果

在Visual Studio中,我們也可以安裝JsLint的PlugIn,來幫助我們檢查Js檔案

  1. 進入VisualStudio,選擇工具=>擴充功能和更新
  2. 選擇並安裝JsLint
  3. 執行建置專案,就會自動掃描JS檔案,並可在錯誤清單看到可能有問題的檔案
  4. 我們也可以針對引用的Library設定排除檢查,或是設定允許的全域變數

剛開始使用JsLint的時候通常會遇到許多的挫折,
但隨著慢慢的修復這些錯誤,提高自己程式碼的品質,
也會發現自己撰寫的JavaScript檔案越來越穩定,
也比較不容易有Side Effect或是靈異現象發生!

※設定使用CssLint
在JavaScript中有JsLint,那麼在Css中同樣也有CssLint這套工具,
同樣的透過它,我們可以掃描並找出有潛在問題的Css程式碼,並及早修正,
而CssLint相依於node.js,所以我們可以透過npm來安裝它
在CommandLine執行以下指令進行安裝

npm install csslint -global


我們可以透過以上指令來掃描我們的Css檔案

csslint [css filename] [options]

畫面上會顯示執行的結果

※總結
透過JsLint和CssLint,我們可以及早發現問題,
並減少在執行時期出錯的機率,遵循著掃描工具的建議,
也可以讓我們的程式碼品質提高,減少Side Effect
(例如JavaScript中的全域變數)


上一篇
CI Server 19 - 使用Jenkins建置Asp.Net MVC專案
下一篇
CI Server 21 - 在每日建置中檢查JavaScript及Css
系列文
使用Jenkins打造.Net CI Server30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言